<template>
    <div>
        <headNav :isBack="isBack" :isHome="isBack" title="班费"></headNav>
        <div class="moneyTit">
            <div class="moneyLeft">
                <p>{{gradeName}}{{className}}</p>
                <div class="monName">{{studentName}}</div>
            </div>
            <div class="moneyRight">
                <p>班费余额</p>
                <div class="monName" v-if="classFareCurrency.classFareCurrency">{{classFareCurrency.classFareCurrency.currency}}元</div>
            </div>
        </div>
        <div class="monTab">
            <ul>
                <li :class="{active:current==0}" @click="changeTab(0)">待交班费<i></i></li>
                <li :class="{active:current==1}" @click="changeTab(1)">提取记录<i></i></li>
            </ul>
        </div>
        <div class="tableContent">
             <!-- 待交班费 -->
            <div class="exList" v-if="current==0" v-loadmore="loadmore2" key="11">
                <ul>
                    <li v-for="(item,index) in callListData" :key="index">
                        <div class="listB">
                            <div class="listTit">
                                <!-- <img v-if="item.payState == 2" class="courseType" src="@/assets/img/classExpense/type-1.png" alt=""> -->
                                <img class="courseType" v-if="item.isExpires" src="@/assets/img/classExpense/type-2.png" alt="">
                                <img class="courseType" v-else src="@/assets/img/classExpense/type-1.png" alt="">
                                <span>{{item.recordCollectionClassFare_Name}}</span>
                                <img v-if="!item.read" class="courseNew" src="@/assets/img/classExpense/type-7.png" alt="">
                            </div>
                            <div class="liItem">发起时间：{{item.createTime}}</div>
                            <div class="liItem">到期时间：{{item.expiresTime}}</div>
                            <div class="liItem">收费：{{item.currency}}元/人</div>
                            <div class="liItem">备注：{{item.remark}}</div>
                        </div>
                        <div class="listBottom">
                            <div class="jiaoM">交费人：{{item.payorName}}</div>
                            <div class="shouP" v-if="item.payState == 1">已交纳：{{item.currency}}元</div>
                            <div class="jiaoFee" @click="payClassFee(item)" v-if="item.payState != 1 && !item.isExpires">交班费</div>
                            <div class="jiaoFeeqi" v-if="item.payState != 1 && item.isExpires">交班费</div>
                        </div>
                        <img class="jiaoType" v-if="item.payState != 1 && !item.isExpires" src="@/assets/img/classExpense/type-8.png" alt="">
                        <img class="jiaoType" v-if="item.payState == 1" src="@/assets/img/classExpense/type-9.png" alt="">
                    </li>
                </ul>
                <div class="load-p">
                    <load-more v-if="isMore" :tip="'正在加载'"></load-more>
                    <load-more v-else :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
                </div>
            </div>
            <!-- 提取记录 -->
            <div class="exList"  v-if="current==1" v-loadmore="loadmore" key="99">
                <ul>
                    <li v-for="(item,index) in tiListData" :key="index" style="height:4rem">
                        <div class="listB">
                            <div class="listTit2">
                                <span class="shengTime">申请时间：{{item.createTime}}</span>
                            </div>
                            <div class="liItem itemC">申请人：{{item.createName}}</div>
                            <div class="liItem itemC">提取金额：{{item.currency}}元</div>
                            <div class="liItem itemC" v-if="item.completeTime">结算时间：{{item.completeTime}}</div>
                            <div class="liItem itemC" v-else>结算时间：未结算</div>
                            <div class="liItem itemC">结算方式：{{item.cashType == 1 ? '支付宝' : '微信'}}</div>
                            <div class="liItem itemC">结算账号：{{item.account}}</div>
                        </div>
                        <img v-if="item.cashState == 1" class="jieIcon" src="@/assets/img/classExpense/jie-1.png" alt="">
                        <img v-if="item.cashState == 2" class="jieIcon" src="@/assets/img/classExpense/jie-2.png" alt="">
                        <img v-if="item.cashState == 3" class="jieIcon" src="@/assets/img/classExpense/zuofei.png" alt="">
                        <!-- <img v-else class="jieIcon" src="@/assets/img/classExpense/jie-1.png" alt=""> -->
                    </li>
                </ul>
                <div class="load-p">
                    <load-more v-if="isMore" :tip="'正在加载'"></load-more>
                    <load-more v-else :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import counter from '@/components/counter'
import cookie from '@/util/cookie'
import { LoadMore} from 'vux'
import {loginUrl} from '@/config/config'
export default {
    name:'parentClassFee',
    components: {
        headNav,
        counter,
        LoadMore
    },
    computed: {
        gradeName () {
            let gradeName = ''
            if(this.getQueryVariable('gradeName')){
                gradeName = decodeURIComponent(this.getQueryVariable('gradeName'))
            }else{
                gradeName = this.$store.state.user.gradeName
            }
            return gradeName
        },
        className () {
            let className = ''
            if(this.getQueryVariable('className')){
                className = decodeURIComponent(this.getQueryVariable('className'))
            }else{
                className = this.$store.state.user.className
            }
            return className
        },
        schoolId () {
            let schoolId = ''
            if(this.getQueryVariable('schoolId')){
                schoolId = this.getQueryVariable('schoolId')
                this.isBack = false
            }else{
                schoolId = this.$store.getters['user/schoolId']
                this.isBack = true
            }
            return schoolId
        },
        gradeId () {
            let gradeId = ''
            if(this.getQueryVariable('gradeId')){
                gradeId = this.getQueryVariable('gradeId')
            }else{
                gradeId = this.$store.getters['user/gradeId']
            }
            return gradeId
        },
        classId () {
            let classId = ''
            if(this.getQueryVariable('classId')){
                classId = this.getQueryVariable('classId')
            }else{
                classId = this.$store.getters['user/classId']
            }
            return classId
        },
        studentName () {
            let studentName = ''
            if(this.getQueryVariable('studentName')){
                studentName = decodeURIComponent(this.getQueryVariable('studentName'))
            }else{
                studentName = this.$store.getters['user/studentName']
            }
            return studentName
        },
        studentId () {
            let studentId = ''
            if(this.getQueryVariable('studentId')){
                studentId = this.getQueryVariable('studentId')
            }else{
                studentId = this.$store.getters['user/studentId']
            }
            return studentId
        }
    },
    data() {
        return {
            current:0,
            classFareCurrency:{},
            pageIndex:0,
            pageSize:3,
            isMore:true,
            callListData:[],
            tiListData: [],
            callData:[],
            isBack:false
        }
    },
    mounted(){
        this.getStatistics()
        this.getCallList()
    },
    methods:{
       changeTab(num){
           this.current = num
           this.isMore = true
            this.pageIndex = 0
           if(num == 0){
                this.callListData = []
              this.getCallList()
           }else{
               this.tiListData = []
               this.getTiList()
           }
       },
       // 获取url参数
         getQueryVariable(variable){
                var query = window.location.search.substring(1)
                var vars = query.split("&")
                for (var i=0;i<vars.length;i++) {
                        var pair = vars[i].split("=")
                        if(pair[0] == variable){return pair[1]}
                }
                return(false)
            },
       //    验证
    //  accountManageList () {
    //         this.$store.dispatch('classFee/ChekClassFareAccountManageList', {schoolId: this.schoolId}).then(res => {
    //             this.getStatistics()
    //         })
    //     },
       //    获取班费余额
      getStatistics () {
          var params = {
                SchoolId : this.schoolId,
                GradeId: this.gradeId,
                ClassId: this.classId,
                PageNum: 1,
                PageSize: 1
            }
            this.$store.dispatch('classFee/GetStatistics', params).then( res => {
                this.classFareCurrency = res.items[0]
            })
      },
    //   待交班费列表
    loadmore2 () {
        // debugger
            this.getCallList()
        },
       getCallList(){
            if(!this.isMore){
                return
            }
          this.pageIndex++
         var params = {
                SchoolId: this.schoolId,
                PayState:0,
                StudentId: this.studentId,
                GradeId: this.gradeId,
                ClassId: this.classId,
                PageNum: this.pageIndex,
                PageSize: this.pageSize
            }                              
            this.$store.dispatch('classFee/RecordStudentClassFare', params).then( res => {
                if(res.items.length < this.pageSize){
                        this.isMore = false
                    }
                this.callData = res.items
                this.callListData = this.callListData.concat(res.items)
                this.readSet()
            })
       },
       //   提取记录RecordCashClassFare
    loadmore () {
        // debugger
            this.getTiList()
        },
      getTiList(){
          if(!this.isMore){
                return
            }
            this.pageIndex++
            var params = {
                SchoolId : this.schoolId,
                GradeId: this.gradeId,
                ClassId: this.classId,
                PageNum: this.pageIndex,
                PageSize: this.pageSize
            }
            this.$store.dispatch('classFee/RecordCashClassFare', params).then( res => {
                if(res.items.length < this.pageSize){
                        this.isMore = false
                    }
                this.tiListData = this.tiListData.concat(res.items)
            })
      },
    //   设置已读 ReadRecordStudentClassFare
       readSet () {
            var params = []
            for (var obj of this.callData) {
                params.push(obj.id)
            }
            this.$store.dispatch('classFee/ReadRecordStudentClassFare', params).then( res => {
            })
        },
         async payClassFee (item) {
            var params = {
                tradeType: 2,
                openId: cookie.get('OpenId'),
                id: item.id
            }
            try {
                let val = await this.$store.dispatch('classFee/Pay', params)
                WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": val.jsapi_appid,     //公众号名称，由商户传入
                "timeStamp":val.jsapi_timestamp,         //时间戳，自1970年以来的秒数
                "nonceStr":val.jsapi_noncestr, //随机串
                "package":val.jsapi_package,
                "signType":val.jsapi_signtype,         //微信签名方式：
                "paySign": val.jsapi_paysign //微信签名
                },
                function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                    this.$vux.toast.text('支付成功', 'middle')
                    window.location.href = loginUrl
                } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                    alert('支付已取消')
                    this.$emit('cancel')
                }
                })
            } catch (err) {
                // alert(111111111)
                // alert(JSON.stringify(err))
                if (err == '订单已完成，不能重复支付' || err == '支付成功，不能重复支付') {
                let res = await this.$store.dispatch('classFee/RefreshPayState', params)
                this.$vux.toast.text('该订单已支付', 'middle')
                } else {
                this.$vux.toast.text('抱歉，该订单超出微信支付限额', 'middle')
                }
            }
        }
    }
}
</script>
<style src="./css/parentFee.css" scoped></style>
<style scoped>
.tableContent{
   height: calc(100% - 3.5rem);
}
.exList{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.load-p{
    padding: 1rem 0 0 0;
}
</style>
